<template>
  <transition>
    <div class="detail" v-show="showDetail">
      <div class="detail-wrapper clearfix">
        <div class="detail-main">
          <h1 class="name">{{seller.name}}</h1>
          <div class="star-wrapper">
            <star :size="48" :score="seller.score"></star>
          </div>
          <div class="title">
            <div class="line"></div>
            <div class="text">优惠信息</div>
            <div class="line"></div>
          </div>
          <ul class="detail-list">
            <li class="detail-item" v-for="(item,index) in seller.supports" :key="index">
              <span class="icon" :class="iconClassMap[item.type]"></span>
              <span class="text">{{item.description}}</span>
            </li>
          </ul>
          <div class="title">
            <div class="line"></div>
            <div class="text">商家公告</div>
            <div class="line"></div>
          </div>
          <div class="speak">
            <p class="speak-gg">{{seller.bulletin}}</p>
          </div>
        </div>
      </div>
      <div class="detail-close" @click="handleDetail">
        <span class="iconfont close">&#xe62d;</span>
      </div>
    </div>
  </transition>
</template>

<script>
import Star from '../../star/Star'
export default {
  name: 'HomeDetail',
  data () {
    return {
      showDetail: false
    }
  },
  props: {
    seller: Object
  },
  components: {
    Star
  },
  created () {
    this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  methods: {
    handleDetail () {
      this.showDetail = false
    },
    toggleShow () {
      this.showDetail = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  .detail
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    z-index 100
    background rgba(7,17,27,0.8)
    &.v-enter-active,.v-leave-active
      transition opacity 0.5s
    &.v-enter,.v-leave-to
      opacity 0
    .detail-wrapper
      min-height 100%
      width 100%
      .detail-main
        margin-top 64px
        padding-bottom 64px
        .name
          font-size 16px
          font-weight 700
          line-height 16px
          color #fff
          text-align center
        .star-wrapper
          margin-top 16px
          margin-bottom 16px
          padding 2px 0
          text-align center
        .title
          display flex
          width 80%
          margin 0 auto 24px auto
          .line
            display inline-block
            flex 1
            height 1px
            background rgba(255,255,255,0.2)
            margin auto
        .detail-list
          width 80%
          margin 0 auto 14px
          /*padding 0 0 28px 36px*/
          .detail-item
            color white
            padding 0 6px 12px 16px
            .icon
              display inline-block
              width 16px
              height 16px
              background-size 16px 16px
              vertical-align top
              margin-right 6px
              &.decrease
                background url("../../../../resource/img/decrease_1@2x.png")
                width 16px
                height 16px
                background-size 16px 16px
              &.discount
                background url("../../../../resource/img/discount_1@2x.png")
                width 16px
                height 16px
                background-size 16px 16px
              &.special
                background url("../../../../resource/img/special_1@2x.png")
                width 16px
                height 16px
                background-size 16px 16px
              &.invoice
                background url("../../../../resource/img/invoice_1@2x.png")
                width 16px
                height 16px
                background-size 16px 16px
              &.guarantee
                background url("../../../../resource/img/guarantee_1@2x.png")
                width 16px
                height 16px
                background-size 16px 16px
            .text
              font-size 12px
              font-weight 200
              line-height 12px
        .speak
          width 80%
          margin 0 auto
          .speak-gg
            font-size 12px
            line-height 24px
    .detail-close
      position relative
      width 32px
      height 32px
      margin -64px auto 0 auto
      clear both
      font-size 32px
      font-weight bold
      color rgba(255,255,255,0.5)
</style>
